{% extends 'base.html' %}
{% block content %}
<div class="container" style="margin-top: 10px">
<div class="row">
<div class="col-sm-2 col-12" style="padding: 0px 10px">
    <div class="col-12 admin-side" style="height: 320px ;border: 1px solid black;font-size: 20px">
        <ul style="list-style-type: none;margin-top:50px;margin-left: 30px">
            <li><a href="#" onclick="loadContent('my_favorite')"><span class="oi oi-image" aria-hidden="true">
            </span>我的收藏</a>
            </li>
            <li><a href="/article_publish"><span class="oi oi-task" aria-hidden="true">
            </span>发布文章</a>
            </li>
            <li><a href="#" onclick="loadContent('my_drafts')"><span class="oi oi-person" aria-hidden="true">
            </span>我的草稿</a>
            </li>
            <li><a href="#" onclick="loadContent('my_articles')"><span class="oi oi-heart" aria-hidden="true">
            </span>我的文章</a>
            </li>
            <li><a href="#" onclick="loadContent('my_comments')"><span class="oi oi-account-login" aria-hidden="true">
            </span>我的评论</a>
            </li>
            <li><a href="#" onclick="loadContent('personal_info')"><span class="oi oi-zoom-in" aria-hidden="true">
            </span>个人资料</a>
            </li>
            <li><a href="#" onclick="loadContent('my_points')"><span class="oi oi-zoom-in" aria-hidden="true">
            </span>我的积分</a>
            </li>
        </ul>
    </div>
</div>
<div class="col-sm-10 col-12" style="padding: 0px 10px;border: 1px solid black;">
    <div class="col-12 admin-main" id="adminMain">
        <!-- 内容将通过 AJAX 加载 -->
    </div>
</div>
</div>
</div>

<script>
    function loadContent(page) {
        var xhr = new XMLHttpRequest();
        xhr.open("GET",page,true);
        xhr.onload = function(){
            if (xhr.status == 200){
                document.getElementById('adminMain').innerHTML = this.responseText;
            } else{
                console.error("Error loading the page:", xhr.status);
            }
        };
        xhr.send();
}
</script>
{% endblock %}